<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	lang="pt-br">

<h:head>
<script type="text/javascript">
    function handleDrop(event, ui) {
        var carrinho = ui.draggable;
 
        carrinho.fadeOut('fast');
    }
</script>
</h:head>
<h:body>
<h:form id="produtoForm">
	
	<p:fieldset id="carrinho" legend="Carrinho de compras" style="margin-top:20px">
        <p:outputPanel id="dropArea">
            <h:outputText value="!!!Solte seus produtos aqui!!!" rendered="#{empty carrinhoMBean.produtos}" 
            				style="font-size:24px;" />
            <p:dataTable 
            		id="carrinhoTable" 
            		var="produtos" 
            		value="#{carrinhoMBean.produtos}" 
            		rendered="#{not empty carrinhoMBean.produtos}">
            		
                <p:column headerText="Produto">
                    <h:outputText value="#{produtos.denominacao}" />
                </p:column>
 
                <p:column headerText="Preço">
                    <h:outputText value="#{produtos.preco}" />
                </p:column>

				<p:column headerText="Quantidade">
                    <h:outputText value="#{produtos.quantidade}" />
                </p:column>
                
				<!-- <p:column style="width:32px">
                    <p:commandButton update=":produtoForm:display" 
                    				 oncomplete="PF('produtoDialog').show()" icon="ui-icon-search">
                        <f:setPropertyActionListener value="#{produto}" target="#{carrinhoMBean.produtoSelecionado}" />
                    </p:commandButton>
                </p:column> -->
                
               	<f:facet name="footer">
               		<h:outputText value="Total de compras: R$ #{carrinhoMBean.somarCarrinho()}" />
               	</f:facet>
                
            </p:dataTable>
        </p:outputPanel>
        
    </p:fieldset>
    <p:droppable for="carrinho" 
    			 tolerance="touch" 
    			 activeStyleClass="ui-state-highlight" 
    			 datasource="gridProdutos" 
    			 onDrop="handleDrop">
        <p:ajax listener="#{carrinhoMBean.onProdutoDrop}" update="dropArea @form" />
    </p:droppable>
    
    <p:fieldset id="produtosDisponiveis" legend="Produtos disponíveis">
        <p:dataGrid id="gridProdutos" var="produto" value="#{produtoMBean.listaCompleta}" columns="3">
            <p:column>
                <p:panel id="pnl" header="#{produto.denominacao}" style="text-align:center"
                    footer="#{produto.preco}">
                    <h:panelGrid columns="1" style="width:100%">
                        <p:graphicImage library="produtos" name="#{produto.img}" width="50"/>
                    </h:panelGrid>
                </p:panel>
                 <p:draggable for="pnl" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel"/>
            </p:column>
        </p:dataGrid>
    </p:fieldset>
 </h:form>
 
</h:body>
</html>
